import { Button, Card, Table, Tag } from "antd";
import type { TableProps } from "antd";
import type { TableDataType } from "../types/index.type";

const columns: TableProps<TableDataType>["columns"] = [
  { width: 70, render: (_text, _record, index) => `${index + 1}` },
  { title: "角色名称", dataIndex: "rolename" },
  {
    title: "是否启用",
    dataIndex: "isEnable",
    render: (_, { isEnable: state }) => {
      const stateMap = {
        0: { label: "否", color: "green" },
        1: { label: "是", color: "geekblue" },
      };
      return <Tag color={stateMap[state].color}>{stateMap[state].label}</Tag>;
    },
  },
  { title: "创建人", dataIndex: "createBy" },
  { title: "创建时间", dataIndex: "createTime" },
  {
    title: "操作",
    key: "action",
    render: () => (
      <>
        <Button type="link" className="p-0">
          编辑
        </Button>
        <Button type="link" className="p-0 ml-8">
          删除
        </Button>
      </>
    ),
  },
];
const data: TableDataType[] = [
  {
    key: "1",
    rolename: "社会主义接班人",
    isEnable: 1,
    createBy: "胖虎",
    createTime: "2024-09-06",
  },
];

const TableCard = () => {
  return (
    <Card className="mt-16">
      <div>
        <Button type="primary" className="bg-primary-color">
          新增
        </Button>
      </div>
      <Table
        columns={columns}
        dataSource={data}
        pagination={{
          pageSize: 5,
          showQuickJumper: true,
          onShowSizeChange: (current, size) => {
            console.log("🚀 ~ TableCard ~ current, size:", current, size);
          },
        }}
        className="mt-8"
      />
    </Card>
  );
};
export default TableCard;
